<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>强国战机</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
  </head>
  <body>

  <button id = "list-btn">查询所有数据</button>
  <button id = "insert-btn">插入数据</button>

  <div>
    <Label>名称：<input id="name" type="text"></Label>
    <Label>数量：<input id="num" type="text"></Label>
    <Label>高度：<input id="altitude" type="text"></Label>
    <Label>速度：<input id="speed" type="text"></Label>
  </div>
  <div id = "list" class="list"></div>
  <script>
    $("#insert-btn").click(function () {
      var name = $("#name").val();
      var num = $("#num").val();
      var altitude = $("#altitude").val();
      var speed = $("#speed").val();
      $.ajax({
        url: "/ajax_json_demo/aircraft",
        type: "POST",
        data: "name="+name+"&num="+num+"&altitude="+altitude+"&speed="+speed,
        contentType: "application/x-www-form-urlencoded;charset=utf-8",
        success: function (data) {
          console.log(data);
          alert("添加成功")
        }
      })
    })


    $("#list-btn").click(function () {
      $.ajax({
        url: "/ajax_json_demo/aircraft",
        type: "GET",
        dataType: "json",
        success: function (data) {
          console.log(data);
          $("#list").text("");
          for (var i = 0; i < data.length; i++) {
            var aircraft = data[i];
            var str = "<li>" + aircraft.name + "</li>";
            $("#list").append(str);
          }
        }
      })
    })
  </script>
  </body>
</html>
